<template>
	<div class="form-container" style="padding-top: 0px !important;">
		<el-form ref="formModel" :model="model" :rules="rules" :label-width="labelWidth" :inline="inline"
			v-bind="$props" v-on="$listeners">
			<!-- <h4 class="orange">基础信息</h4> -->
			<el-row>
				<slot name="SysCustomerNameBefore"></slot>
				<slot name="SysCustomerName">
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-form-item prop="SysCustomerName" :label="keyLan['SysCustomerName'] + ':'">
							<el-input v-model="model.SysCustomerName" ref="SysCustomerName"></el-input>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="SysCustomerNameAfter"></slot>
				<slot name="PhoneBefore"></slot>
				<slot name="Phone">
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-form-item prop="Phone" :label="keyLan['Phone'] + ':'">
							<el-input v-model="model.Phone"></el-input>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="PhoneAfter"></slot>

				<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
					<el-form-item prop="SysCustomerIdCard" :label="keyLan['SysCustomerIdCard'] + ':'">
						<el-input v-model="model.SysCustomerIdCard[0].IdCard"></el-input>
					</el-form-item>
				</el-col>

				<slot name="CompanyBefore"></slot>
				<slot name="Company">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item prop="Company" :label="keyLan['Company'] + ':'">
							<el-input v-model="model.Company"></el-input>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="CompanyAfter"></slot>

				<slot name="EnumSysCustomerIntentionBefore"></slot>
				<slot name="EnumSysCustomerIntention">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item prop="EnumSysCustomerIntention" :label="keyLan['EnumSysCustomerIntention'] + ':'">
							<el-radio-group v-model="model.EnumSysCustomerIntention">
								<el-radio v-for="item in EnumSysCustomerIntention" :key="item.Value" :value="item.Value"
									:label="item.Value">
									{{ enumLanTxt(item.Label) }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="EnumSysCustomerIntentionAfter"></slot>
				<slot name="QualificationBefore"></slot>
				<slot name="Qualification">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item prop="Qualification" :label="keyLan['Qualification'] + ':'">
							<el-select v-model="model.Qualification" clearable style="width:120px;"
								:placeholder="keyLan['Qualification']">
								<el-option v-for="item in Qualification" :key="item.Value" :value="item.Value"
									:label="enumLanTxt(item.Label)">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="QualificationAfter"></slot>
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-form-item prop="ReferrerID" :label="replaceID(keyLan['ReferrerID']) + ':'">
						<remoteselect v-model="search.ReferrerID" url="api/Referrer/ListSelect" value-label="Name"
							value-key="ReferrerID" query-key="selectIDName"
							:placeholder="replaceID(keyLan['ReferrerID'])" style="width:150px;">
							<template v-slot="{ row }">
								{{ row.Name + "/" + row.Phone }}
							</template>
						</remoteselect>
					</el-form-item>
				</el-col>

				<slot name="RemarkBefore"></slot>
				<slot name="Remark">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item prop="Remark" :label="keyLan['Remark'] + ':'">
							<el-input type="textarea" :rows="2" v-model="model.Remark" style="width: 100%;"></el-input>
						</el-form-item>
					</el-col>
				</slot>
				<slot name="RemarkAfter"></slot>
			</el-row>
		</el-form>

		<div style="display: block;text-align: center;">
			<el-button type="warning" v-if="isAdd" @click="resetThisVal('model')">{{ comLan["btnReset"] }}</el-button>
			<el-button @click="closeCurrent">{{ comLan["btnCancel"] }}</el-button>
			<el-button type="success" @click="save" :loading="loading">{{ comLan["btnSave"] }}</el-button>
		</div>
	</div>
</template>

<script>
import common from "@/common/common.js";
import js from "./js.js";

export default {
	name: "SysCustomerAddRedict",
	components: {},
	mixins: [common.baseVM, js],
	data() {
		return {
			SysCustomerIdCard: {
				ID: 0,
				SysCustomerID: 0,
				CardType: "01",
				IdCard: null,
				ReviewDate: null,
				IdCardEndDate: null,
				Remark: null,
			},
			model: {
				SysCustomerID: 0,
				EnumSysCustomerType: 0,
				HeaderUrl: null,
				SysCustomerName: null,
				Phone: null,
				BirthDay: null,
				Pwd: null,
				EnumStatus: 1,
				IsDemo: false,
				Remark: null,
				SysEmployeeID: null,
				EnumSysCustomerSource: 0,
				EnumSysCustomerIntention: 0,
				CertSearch03Json: null,
				CertSearch02Json: null,
				CertSearchUpdateTime: null,
				ReferrerID: null,
				EnumGender: 0,
				Address: null,
				Company: null,
				Qualification: 0,

				SysCustomerIdCard: [this.SysCustomerIdCard],
				SysCustomerOrganizationTrain: []
			}
		}
	},
	methods: {
		focus() {
			this.$nextTick(() => {
				this.$refs.SysCustomerName.focus();
			});
		},

		init() {
			this.loadBeforeValSuccess = false;
			this.resetVal("model");
			var query = this.getQuery();
			var id = parseInt(query["id"]);
			if (isNaN(id)) id = 0;
			this.isAdd = id == 0;
			if (this.isAdd) { //新建
				this.loadBeforeVal();
				this.focus();
				return;
			}
			this.get("api/SysCustomer/Get?id=" + id).then(data => {
				if (data.Result.SysCustomerIdCard == null || data.Result.SysCustomerIdCard.length == 0) {
					data.Result.SysCustomerIdCard = [this.SysCustomerIdCard];
				}
				this.model = data.Result;
				this.focus();
			});
		},
		closeCurrent() {
			this.refreshList("/SysCustomer/SysCustomerListNew");
		},
		save() {
			this.formValidate('formModel', () => {
				var post = JSON.parse(JSON.stringify(this.model));
				this.loading = true;
				this.post('api/SysCustomer/Save', post).then(data => {
					this.showToast(data.Message, "success");
					this.loading = false;

					this.clearBeforeVal();
					this.closeCurrent();
				}).catch((error) => {
					this.loading = false;
				});
			});
		}
	}
}
</script>
